<template>
  <a-layout-sider v-model:collapsed="collapsed" collapsible class="sidebar">
    <div class="menu-title">教学管理</div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      theme="dark"
      @click="handleMenuClick"
    >
      <a-menu-item key="/manage">
        <template #icon><book-outlined /></template>
        教学资源管理
      </a-menu-item>
      <a-menu-item key="/chat/WMO8HYUTaAvMvfX2">  <!-- 教案智能生成 -->
        <template #icon><edit-outlined /></template>
        教案智能生成
      </a-menu-item>
      <a-menu-item key="/chat/ANOTHER_BOT_ID">  <!-- 讲义生成 -->
        <template #icon><file-text-outlined /></template>
        讲义生成
      </a-menu-item>
      <a-menu-item key="/Analysis">
        <template #icon><bar-chart-outlined /></template>
        学生学情分析
      </a-menu-item>
      <a-menu-item key="/homework">
        <template #icon><file-done-outlined /></template>
        作业管理
      </a-menu-item>
      <a-menu-item key="/admin/ai/chat">
        <template #icon><bar-chart-outlined /></template>
        AI智能对话
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  BookOutlined,
  EditOutlined,
  FileTextOutlined,
  BarChartOutlined,
  FileDoneOutlined
} from "@ant-design/icons-vue";

const router = useRouter();
const route = useRoute();

const collapsed = ref(false);
const selectedKeys = ref([route.path]); // 绑定选中的菜单项

// 监听路由变化，保持菜单高亮
watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath];
  }
);

// 处理菜单点击事件
const handleMenuClick = ({ key }) => {
  router.push(key);
};
</script>

<style scoped>
.menu-title {
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 16px 0;
}
</style>
